<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getJobDetail, apply, cancelApply } from '@/api/partTimeJob'
import type { PartTimeJob } from '@/api/partTimeJob/type'
import { BaseResponse } from '@/api/base'
import { toast } from '@/utils/common'
import { applyStatus, applyStatusColor } from "./common"

const id = ref<number>()
const jobDetail = ref<PartTimeJob>()

const loadDeail = async () => {
  try {
    const res: BaseResponse = await getJobDetail(id.value)
    jobDetail.value = res.data
  } catch (error) {
    toast(error.tips)
  }
}

onLoad((options: any) => {
  id.value = Number(options.id)
  loadDeail()
})

const applyJob = async () => {
  try {
    const res = await apply(id.value)
    loadDeail()
    toast(res.tips)
  } catch (error) {
    toast(error.tips)
  }
}

const cancel = async () => {
  uni.showModal({
    title: '提示',
    content: '是否取消申请',
    success: async (res: any) => {
      if (!res.confirm) {
        return
      }
      try {
        const res = await cancelApply(id.value)
        loadDeail()
        toast(res.tips)
      } catch (error) {
        toast(error.tips)
      }
    }
  })
}
</script>

<template>
  <view class="part-time-job-detail">
    <uv-list>
      <uv-list-item title="兼职名称" :border="true">
        <template #footer>
          <uv-text color="#999" :text="jobDetail?.title"></uv-text>
        </template>
      </uv-list-item>
      <uv-list-item title="兼职内容" :border="true">
        <template #footer>
          <uv-text color="#999" :text="jobDetail?.content"></uv-text>
        </template>
      </uv-list-item>
      <uv-list-item title="薪水" :border="true">
        <template #footer>
          <uv-text color="#999" :text="jobDetail?.salary"></uv-text>
        </template>
      </uv-list-item>
      <uv-list-item title="招聘人数" :border="true">
        <template #footer>
          <uv-text color="#999" :text="jobDetail?.count + '人'"></uv-text>
        </template>
      </uv-list-item>
      <uv-list-item title="工作时间" :border="true">
        <template #footer>
          <uv-text color="#999" :text="jobDetail?.workTime"></uv-text>
        </template>
      </uv-list-item>
      <uv-list-item title="工作地址" :border="true">
        <template #footer>
          <uv-text color="#999" :text="jobDetail?.workAddress"></uv-text>
        </template>
      </uv-list-item>
      <uv-list-item title="联系方式" call :border="true">
        <template #footer>
          <uv-text color="rgb(41, 121, 255)" mode="phone" :text="jobDetail?.contact"></uv-text>
        </template>
      </uv-list-item>
      <uv-list-item title="发布时间" :border="true">
        <template #footer>
          <uv-text color="#999" :text="jobDetail?.publishTime"></uv-text>
        </template>
      </uv-list-item>
      <uv-list-item title="申请状态" v-show="jobDetail?.applyStatus !== -1" :border="true">
        <template #footer>
          <uv-text :text="applyStatus(jobDetail?.applyStatus)"
            :type="applyStatusColor(jobDetail?.applyStatus)"></uv-text>
        </template>
      </uv-list-item>
    </uv-list>
    <view class="part-time-job-buttom" v-if="jobDetail?.applyStatus === -1">
      <uv-button color="#ff7744" class="part-time-job-apply-btn" @click="applyJob" text="立即申请">
      </uv-button>
    </view>
    <view class="part-time-job-buttom" v-if="jobDetail?.applyStatus !== -1">
      <uv-button v-if="jobDetail?.applyStatus === 0 || jobDetail?.applyStatus === 1" text="取消申请"
        class="part-time-job-btn" @click="cancel" color="#ff7744">
      </uv-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.part-time-job-buttom {
  position: fixed;
  bottom: 0;
  right: 0;
  width: calc(100% - 40rpx);
  padding: 20rpx;
  display: flex;
  justify-content: flex-end;
  background-color: #fff;
  z-index: 10;
}
</style>
